<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAXTEST</title>
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<div id="main" style="width: 900px;height:900px;"></div>

    <script>
        let myChart = echarts.init(document.getElementById('main'));

        let gname = [];
        let grank = [];

        $.ajax({
            type:"GET",
            url:"game",
            dataType:"json",
            async:true,
            success:function (result) {
                for (let i = 0; i < result.length; i++){
                    gname.push(result[i].gname);
                    grank.push(result[i].grank);
                }
            },
            error :function(errorMsg) {
                alert("获取后台数据失败！");
            }
        });

        let option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                //结合
                data: gname
            },

            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                //结合
                data: grank
            }]
        };
        myChart.setOption(option);
        </script>
    </body>
</html>